<template>
    <div class="notFound">
        <div class="box">
            <el-image 
                style="width: 20vw; height: 20vw; box-sizing: border-box;" 
                :src="avatarImage" 
                fit="fill" 
            />
            <div class="text-box">
                <div class="text-box-title">抱歉!</div>
                <div class="text-box-text-1">当前页面不存在...</div>
                <div class="text-box-text-2">请检查您输入的网址是否正确，或点击下面的按钮返回首页。</div>
                <el-button
                    type="primary" 
                    @click="routerPush"
                >
                    返回首页
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { HAGBTXXApi } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
    } from '@element-plus/icons-vue'
    
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const { isLocked } = storeToRefs(store)
	const avatarImage = new URL('@/assets/img//404.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const titleText: Ref<string> = ref('欢迎来到Vue Admin！')

    const currentTab = defineModel<string>('currentTab', {
        required: false,
        default: '',
    })
    const tabsArr = defineModel<any[]>('tabsArr', {
        required: false,
        default: [],
    })
    console.log(currentTab.value)
    console.log(tabsArr.value)
    const routerPush = () => {
        let idx = 0
        for (let i = 0; i< tabsArr.value.length; i++) {
            console.log(i)
            if (tabsArr.value[i].routerPath == currentTab.value) {
                idx = i
                break;
            }
        }
        tabsArr.value.splice(idx, 1)
        router.replace({
            path: '/'
        })
    }
    
</script>

<style lang="scss" scoped>
    // .notFound::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    .notFound {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
    }
    .box {
        // background-color: rgba(255, 255, 000);
        width: 800px;
        // height: 600px;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .text-box {
        .text-box-title {
            padding: 10px 0;
            font-size: 30px;
            font-weight: bold;
            color: rgb(64, 158, 255);
        }
        .text-box-text-1 {
            padding: 10px 0;
            font-size: 20px;
            font-weight: bold;
        }
        .text-box-text-2 {
            padding: 10px 0 20px 0;
        }
    }
</style>